<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/index_work.css">
    <script type="text/javascript" src="script/jquery-1.7.2.js"></script>
    <script type="text/javascript">
        $(function () {
            //微博发布
            $("#fbBtn").click(function () {
                var title = $("#title").val();
                var writer = $("#writer").val();
                var content = $("#content").val();
                var tr = "<tr>";
                tr += "<td><input type='checkbox' class='ck'></td>";
                tr += "<td>"+title+"</td>";
                tr += "<td>"+writer+"</td>";
                tr += "<td>"+content+"</td>";
                tr += "<td>"+new Date().toLocaleString()+"</td>";
                tr += "<td><input type='button' value='删除' class='deleteBtn'></td>";
                tr += "</tr>";
                $("#msgWeiBo tr:eq(1)").after(tr);
                $("#fbTable :text").val("");
            });

            //全选
            $("#qx").click(function () {
                $(".ck").prop("checked", true);
            });

            //全不选
            $("#qbx").click(function () {
                $(".ck").prop("checked", false);
            });

            //反选
            $("#fx").click(function () {
                $(".ck").map(function () {
                    if(this.checked){
                        this.checked = false;
                    }else{
                        this.checked = true;
                    }
                });
            });

            //复选框
            $("#selectAll").click(function () {
                $(".ck").prop("checked", $(this).prop("checked"));
            });

            //复选框的状态保持一致
            $("#msgWeiBo").on("click", ".ck", function () {
                if($(".ck").length == $(".ck:checked").length){
                    $("#selectAll").prop("checked", true);
                }else{
                    $("#selectAll").prop("checked", false);
                }
            });

            //删除
            $("#msgWeiBo").on("click", ".deleteBtn", function () {
                if(confirm("确认删除吗？")){
                    $(this).parent().parent().remove();
                }
            });

            //批量删除
            $("#deleteMore").click(function () {
                if(confirm("确认删除吗？")){
                    $(".ck:checked").parent().parent().remove();
                }
            });

            //收起展开
            $("#testId").click(function () {
                $("#msgWeiBo tr:gt(0)").fadeToggle(500);
            });
        });
    </script>
</head>
<body>
<table id="fbTable">
    <tr>
        <th>微博发布</th>
    </tr>
    <tr>
        <td>
            标题:<input type="text" id="title">
        </td>
    </tr>
    <tr>
        <td>
            作者:<input type="text" id="writer">
        </td>
    </tr>
    <tr>
        <td>
            内容:<input type="text" id="content">
        </td>
    </tr>
    <tr>
        <td>
            <input type="button" value="发布" id="fbBtn">
        </td>
    </tr>
</table>

<table id="msgWeiBo" style="margin-top: 20px;">
    <tr>
        <th colspan="6">微博信息（<input type="button" value="收起/展开" id="testId">）</th>
    </tr>
    <tr>
        <th>
            <input type="checkbox" id="selectAll">
        </th>
        <th>标题</th>
        <th>作者</th>
        <th>内容</th>
        <th>发布时间</th>
        <th>操作</th>
    </tr>
    <tr>
        <td colspan="6">
            <input type="button" value="全选" id="qx">
            <input type="button" value="全不选" id="qbx">
            <input type="button" value="反选" id="fx">
            <input type="button" value="批量删除" id="deleteMore">
        </td>
    </tr>
</table>
</body>
</html>